<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>D3交互式数据可视化</title>
	<style>
		.axis path,
		.axis line{
			fill: none;
			stroke: black;
			shape-rendering: optimizeSpeed;
		}
		.axis text{
			font-size: 12px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<ul>
		<li>过度里面也有each(),但这里的each()是对事件的响应：each([type,]listenr)</li>
		<li>each([type,]listenr) - type的值:start、end、interrupt</li>
		<li>当某过度在进行中，该元素又在别处被调用一个新的过度，这时候就会发生打断事件</li>
		<li>测试得知：被打断了，前一个过度就终止了--移情别恋去执行新过度了</li>
		<li>transition.call(function[,arguments] -- 以过度对象本身为参数调用，对坐标轴进行过度操作时需要用到</li>
		<li>
			<strong>过度样式</strong>
			<li>过度样式：linear、cubic、elastic、back、bounce、in、out、in-out、out-in</li>
		<li>可以是使用linear-in、bounce-out、back-in-out等组合，默认是cubic-in-out</li>
		</li>
		<li>
			<strong>定时器</strong>
			<li>setTimeout、setInterval</li>
			<li>d3.timer是使用requestAnimationFrame实现的</li>
		</li>
	</ul>
	<div class="transition">
		
	</div>
	<div class="call">
		
	</div>
	<script src="js/d3_3.5.7.js"></script>
	<script>
		var width = 500;
		var height = 150;
		var dataset = [10,10,10];

		var svg = d3.select(".transition").append('svg').attr({"width":width,"height":height});
		var g = svg.append("g");

		var rect = g.selectAll("rect").data(dataset).enter().append("rect")
								.attr("x",50)
								.attr("y",function(d,i) {
									return 30 + i * 50
								})
								.attr("width",function(d) {
									return d
								})
								.attr("height",40)
								.attr("fill","skyblue")
								.attr("class",function(d,i) {
									return "rect" + i;
								})
		g.select(".rect0").transition().attr("width",500).delay(200).duration(2000)
						.each("start",function(d,i) {
							console.log("starting" + d + "---" + i)
						})
						.each("end",function(d,i) {
							console.log("ending" + d + "---" + i)
						})

		g.select(".rect1").transition().attr("width",500).delay(600).duration(2000)
					.each("interrupt",function(d,i) {
						console.log("interrupt")
					})

		setTimeout(function() {
			g.select(".rect1").transition().attr("fill","red").delay(600)
		},700)

		g.select(".rect2").transition().attr("width",500).delay(1000).duration(2000);

		//测试call()
		var svg2 = d3.select(".call").append('svg').attr({"width":width,"height":height});
		var xScale = d3.scale.linear()
									.domain([0,10])
									.range([0,300])
		var xAxis = d3.svg.axis()
								.scale(xScale)
								.orient("bottom")
		var g2 = svg2.append("g")
						.attr("class","axis")
						.attr("transform","translate(50,50)")
						.call(xAxis);
		//坐标轴过度变化
		xScale.domain([0,50])
		g2.transition().duration(2000).call(xAxis)
	</script>
</body>
</html>